<template>
  <h1>生命钩子函数</h1>
  <h2>数量更新--{{ number }}</h2>
  <button @click="number++">点击更新</button>
</template>

<script>
import { onMounted, onUpdated, onUnmounted, ref } from 'vue';
export default {
  setup() {
    const number = ref(0);
    console.log('这里会自动执行，相当于created');
    onMounted(() => {
      console.log('vue3生命周期-onMounted');
      console.log('在这里可以获取DOM元素', document.querySelector('h1'));
    });
    onUpdated(() => {
      console.log('vue3生命周期-onUpdated');
    });
    onUnmounted(() => {
      console.log('vue3生命周期-onUnmounted');
    });

    return { number };
  },
};
</script>
